<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
       <div v-for="item in list"><input type="checkbox" v-model="item.checked">
        <p>名称：{{item.name}}</p>
        <p><button @click="item.num--" :disabled="item.num <= 0">-</button>个数：{{item.num}}<button @click="item.num++">+</button></p>
        <p>单价：{{item.price}}</p>
        <p>总价：{{item.total}}</p>
       </div>
<h1><input type="checkbox" v-model="isAllCheck">全选 总价：{{totalPrice}}</h1>
    </div>
</body>
<script src="./vue.js"></script>
<script>
     const {
			createApp,
			ref,
			reactive,
			computed
		} = Vue;
		const app = createApp({
			setup() {
				let list = ref([{
					name: "沙发",
					price: 2000,
					num: 2,
					checked:false
				}, {
					name: "电视",
					price: 5000,
					num: 3,
					checked:false
				}])
                let list2 = computed(() => {
					return list.value.map(v => {
						v.total = v.price * v.num
						return v
					})
				})
                const totalPrice = computed(() => {
					let total = 0;
					
					list2.value.forEach(function(v){
						total+=v.total
					})
					return total
				})
                const isAllCheck = computed({
					
					get(){
							return list.value.every(v=>v.checked)
					},
					set(val){
						if(val){
							list.value.forEach(v=>{
								v.checked = true
							})
						}else{
							list.value.forEach(v=>{
								v.checked = false
							})
						}
						
					}
				})
				return {
					list,
                    isAllCheck,
                    list2,
                    totalPrice
				}
			}
    }).mount('#app')
</script>
</html>